<template>
  <div>
    <el-card shadow="always" class="box-top">
      <el-form>
        <el-row :gutter="24">
          <el-col :span="6">
            <!-- <h6>仓库编号</h6> -->
            <el-form-item label="仓库编号">
              <el-input v-model="formData.code" placeholder="请输入内容" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <!-- <h6>仓库名称</h6> -->
            <el-form-item label="仓库名称">
              <el-input v-model="formData.name" placeholder="请输入内容" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <!-- <h6>仓库状态</h6> -->
            <el-form-item label="仓库状态">
              <el-select v-model="formData.type" placeholder="请选择" style="width: 100%;">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4" style="margin: 40px 0 0 100px;">
            <el-button class="btn" style="color:#000;" type="warning" round>搜索</el-button>
            <el-button class="btn" style="color:#000;" round plain @click="btnReset">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <!-- 表格 -->
    <el-card class="box-footer">
      <el-button class="btnAdd" round @click="$router.push('/information/import')">新增仓库</el-button>
      <el-table border max-height="250" :data="list">
        <el-table-column type="index" prop="index" label="序号" width="150" />
        <el-table-column prop="code" label="仓库编码" width="150" />
        <el-table-column prop="name" label="仓库名称" width="150" />
        <el-table-column prop="type" label="仓库类型" width="150" />
        <el-table-column prop="location" label="省/市/区" width="200" />
        <el-table-column prop="address" label="详细地址" width="150" />
        <el-table-column prop="status" label="仓库状态" width="150" />
        <el-table-column prop="surface" label="仓库面积m²" width="150" />
        <el-table-column prop="includedNum" label="库存数量" width="150" />
        <el-table-column prop="personName" label="负责人" width="150" />
        <el-table-column prop="phone" label="联系电话" width="150" />
        <el-table-column prop="updateTime" label="更新时间" width="200" />
        <el-table-column label="操作" fixed="right" width="250">
          <template>
            <el-button style="color: #fdb21e;" type="text" size="small">编辑</el-button>
            <el-button style="color: #fdb21e;" type="text" size="small">停用</el-button>
            <el-button style="color: #fdb21e;" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <el-row class="block">
        <el-pagination
          :page-sizes="pageConfig.sizes"
          :page-size="pageConfig.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        />
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { getWarehouseAPI } from '@/api/information'
export default {
  data() {
    return {
      formData: {
        code: '',
        name: '',
        type: ''
      },
      pageConfig: {
        page: 1,
        size: 10,
        sizes: [10, 20, 30, 40]
      },
      total: 4,
      list: [],
      options: [{
        value: '1',
        label: '全部'
      },
      {
        value: '2',
        label: '停用'
      },
      {
        value: '3',
        label: '启用'
      }]

    }
  },
  async created() {
    this.list = await getWarehouseAPI(this.list)
  },
  methods: {

    // 重置
    btnReset() {
      this.formData = {
        code: '',
        name: '',
        type: ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.btnText:hover{
  color: orange;
}
.block{
  margin: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.box-top{
  width: 99%;
  height: 150px;
  border-radius: 10px;
  margin-bottom: 20px;
}
.box-footer{
  width: 99%;
  border-radius: 10px;
}
.btn:hover{
background-color: rgb(255, 153, 0);
border: 1px solid rgb(255, 153, 0);
}
.btnAdd{
  background-color: rgb(32, 190, 121);
  color: white;
  margin: 0 0 20px;
}
.btnAdd:hover{
  background-color: rgb(17, 122, 78)
}
</style>
